<template>
  <div class="login-wrap" style="background-color:#fff">
    <div class="leftLogo">
      <img src="../assets/img/loginLeft.png" alt="">
    </div>
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
      <div class="messLogin">
        <p class="remend">忘记密码</p>
        <el-form-item prop="mobile" class="phoneInput">
          <h1>手机号码</h1>
          <div class="phones">
            <p class="types">+86  <img src="../assets/img/dropDown.png" alt=""></p>
            <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="注册时填写的手机号"></el-input>
          </div>
        </el-form-item>
          <div class="errors" v-show="Zhphone">请输入手机号</div>
        <el-form-item prop="code" class='phoneInput codeInput' >
          <h1>验证码</h1>
          <el-input v-model="ruleForm.code" autocomplete="off" placeholder="请输入验证码">
            <el-button slot="append" v-show="showTime" @click="sendEmail(ruleForm.code)" >发送验证码</el-button>
            <el-button slot="append" v-show="!showTime" >{{sendTime}}秒</el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="phone" class="phoneInput codeInput">
          <h1>设置密码</h1>
          <div class="phones">
            <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="8-46位必须包含数字和字母"></el-input>
          </div>
        </el-form-item>
          <div class="errors" v-show="Zhpasswords">请输入6-16位由数字和字母组成的密码</div>
        <el-form-item id="loginScend">
          <el-button type="primary" @click="submitForms('ruleForm')" :loading="logining" style="width:80%;margin-left:10%;">确认</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'login',
  data() {
    return {
      Zhpasswords:false,
      Zhphone:false,
      // 验证码
      showTime: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      sendTime: '', /* 倒计时 计数器 */
      timer: null,
      num:0,
      //定义loading默认为false
      logining: false,
      ruleForm: {
        //密码登录----username和password默认为空
        mobile:'',
        code: '',
        password:''
      },
      // rules前端验证
      rules: {
          // mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
          // { min: 11, max:11, message: '请输入正确的手机号', trigger: 'blur' }],
          // code: [{ required: true, message: '请输入验证码', trigger: 'blur' },
          // { min: 4, max:6, message: '请输入正确的验证码', trigger: 'blur' }
          // ]
      }
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
  //   this.$message({
  //     message: '账号密码及验证码不为空即可',
  //     type: 'success'
  //   })
  },
  // 里面的函数只有调用才会执行
  methods: {
    
    /*点击发送验证码时，开始计数，一分钟发送一次*/
      sendEmail(){
        var xhr = new XMLHttpRequest();
        if(this.ruleForm.mobile==''){
          alert('请输入手机号')
        }else{
          this.$axios({
        method: 'post',
        url: '/admin/send_validate_code',
        params: {
          mobile:this.ruleForm.mobile
        },
      }).then(res=>{
        console.log(res)
      });
          const TIME_COUNT = 60; //  更改倒计时时间
          if (!this.timer) {
            this.sendTime = TIME_COUNT;
            this.showTime = false;
            this.timer = setInterval(() => {
              if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
                this.sendTime--;
              } else {
                this.showTime = true;
                clearInterval(this.timer); // 清除定时器
                this.timer = null;
              }
            }, 1000);
          }
        }
      },
  
   
//设置密码
    submitForms(formName) {
      var passwordreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,46}$/
      if(this.ruleForm.mobile==''){
         this.Zhphone=true
         return false
      }else if(!passwordreg.test(this.ruleForm.password)){
            this.Zhpasswords=true
            return false;
          }else{
            this.$axios({
          method: 'post',
          url: '/admin/forget_password',
          params: {
          mobile:this.ruleForm.mobile,
          password:this.ruleForm.password,
          code:this.ruleForm.code
        },
      }).then(res=>{
        console.log(res,'改密码')
      })
          }
    //  this.$router.push({ path: './login' })
    },

  }
}
</script>
<style scoped>
.errors{font-size: 14px;color: #F56C6C;margin: 0.5rem 1%;}

.remend{font-size: 22px;color: #3D3D3D;margin: 1rem 1.5%;}
*{margin: 0;padding: 0;}
.login-wrap {display: flex;background-color: #fff;}
.leftLogo img{width: 100%;height: 100vh;display: block;}
.login-container {overflow: hidden; width: 35%; margin: 0 auto}
.passLogin,.messLogin{margin-top: 8rem;}
/*手机号*/
.phoneInput{border-bottom: 1px solid #EEEEEE;outline:0;width:100%;outline:none;padding-left: 14px;box-sizing: border-box;}
.phoneInput h1{font-size: 20px;}
.phoneInput .phones{display: flex;}
.phoneInput .phones img{vertical-align: middle;width: 16%;}
.phoneInput .types{width:13%;font-size: 20px;color: #666666;}
/deep/.phoneInput .el-input__inner{outline:0;border: none;width:300px;font-size: 16px;color: #5B5A5A;}
/deep/ .phoneInput .el-input{width: 85%;}
/*密码框*/
.passInput{margin-top: 38px;}
/deep/.passInput .el-input__inner{width: 100%;padding: 0;margin-top:0.7rem;}
/*手机号提示*/
/deep/.phoneInput .el-form-item__error{color:#F56C6C;font-size:14px;position:absolute;top:118%;left:1%}
/* 忘记密码 */
.forget{font-size: 20px;font-family: Microsoft YaHei;font-weight: 400;text-decoration: underline;color: #B6B6B6;text-align: right;margin-top: 21px;cursor: pointer;}

/* 登录 */
#loginIndex .el-button--primary{
height: 60px;margin-top:1rem;font-size: 20px;
background: #436AF2;border-radius: 10px;}
/* 短信登录 */
#loginScend .el-button--primary{width: 520px;
height: 65px;margin-top:4rem;font-size: 20px;
background: #436AF2;border-radius: 10px;}
/* 验证码 */
.codeInput{margin-top:38px;}
/deep/ .codeInput .el-input__inner{padding: 0;width: 400px;}
/deep/ .codeInput .el-input-group__append{border:none;color: #436AF2;font-size:20px;padding-top: 0.7rem;}
/deep/ .el-input-group__append, .el-input-group__prepend{background-color: #fff;}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin-top: 10px;
}

</style>